<template>
	<view class="content">
		<view class="header-two">
			<view class="header-two-title">登录</view>
		</view>

<!-- 		<view class="title">手机号</view>
		<view class="phone">
			<view class="phone-one">+86</view>
			<view class="phone-two">|</view>
			<view class="phone-three">
				<input v-model="value" placeholder="请填写手机号码" style="margin-left: 20upx;">
			</view>
		</view> -->
<!-- 		<view class="title">验证码</view>
		<view class="verification">
			<view class="verification-one">
				<input v-model="code" placeholder="请填写验证码" style="margin-left: 20upx;">
			</view>
			<view class='verification-two' @click="getcode"><span v-if="status">点击获取</span><span
					v-if="!status">{{time}}s</span></view>
		</view> -->

<!-- 		<view class="prompt">
			未注册的手机号验证通过后将自动注册
		</view> -->

		<!-- 登录按钮 -->
		<!-- <view class="login" @click="login">登录</view> -->

		<!-- 登录须知 -->
<!-- 		<view>
			<label class="radio radios">
				<radio value="r1" @click="xieyi_value=!xieyi_value" :checked="xieyi_value"  style="transform:scale(0.6)" />
				已阅读并同意 <text> [用户协议] </text> 和 <text> [隐私条款] </text>
			</label>
		</view> -->

		<!-- 第三方登录 -->
<!-- 		<view class="order">
			<span class="line"></span>
			<span class="txt">
				<span style="display: inline-block;width:40upx;color:#CCCCCC;"></span>
				第三方登录
				<span style="display: inline-block;width:40upx;color:#CCCCCC;"></span>
			</span>
			<span class="line"></span>
		</view> -->

		<view style="width:710upx;text-align: center;" @click="wxlogin">
			<image class="wxdl" src="https://mes.renkangshangcheng.cn/appimage/wxdl.png" mode=""></image>
			<view class="buttons">登录</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				code: "",
				time: 60,
				status: true,
				xieyi_value:false
			}
		},
		onShow() {
		this.get_wx_code()	
		},
		methods: {
			getcode() {
				var _this = this;
				if (!this.status) {
					uni.showToast({
						title: "请稍后再试",
						icon: "none"
					})
					return false;
				}
				this.$api.doRequest('post', "api/send_sms_code", {
					mobile: this.value
				}).then(res => {
					if (res.data.code == 200) {
						_this.status = false;
						this.set_time();
					}
				})
			},
			set_time() {
				var _this = this;

				var time = setInterval(function() {
					_this.time = _this.time - 1
					if (_this.time <= 0) {
						_this.status = true;
						_this.time = 60;
						clearInterval(time);
					}
				}, 1000)
			
			},
			login() {
				if(!this.xieyi_value){
					uni.showToast({
						title:"请同意用户协议和隐私条款",
						icon:"none"
					})
					return false;
				}
				var data = {
					mobile: this.value,
					captcha: this.code
				}
				console.log(data);
				this.$api.doRequest("post", "api/mobile_login", data).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						console.log(12313)
						uni.setStorageSync("token", res.data.data.token)
						uni.switchTab({
							url: "/pages/sindex/index"
						})
					}
				})
			},
			get_wx_code(){
				var _this=this;
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  _this.wx_code=loginRes.code;
				  }})
			},
			wxlogin() {
				// if(!this.xieyi_value){
				// 	uni.showToast({
				// 		title:"请同意用户协议和隐私条款",
				// 		icon:"error"
				// 	})
				// 	return false;
				// }
				//#ifdef H5
				  uni.showToast({
				  	title:"浏览器暂不支持微信登录",
					icon:"none"
				  })
				  //#endif
				var _this=this;
				uni.showLoading({})
		uni.getUserProfile({
			desc: '获取用户信息',
			lang: 'zh_CN',
			success: res => {
		      var userinfo=res.userInfo;
			  var data={
				  code:_this.wx_code,
				  avatar:userinfo.avatarUrl,
				  nick_name:userinfo.nickName
			  }
			  _this.$api.doRequest("post",'api/wechat_mini_program_auth',data).then(res=>{
				  uni.setStorageSync("token", res.data.data.token)
				  uni.switchTab({
				  	url: "/pages/sindex/index"
				  })
			  })
			}
		})
			
			},
			xieyi(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	.content {
		margin: 0;
		padding: 0;
		width: 710upx;
		margin: 0 auto;
	}

	.header-two {
		width: 710upx;
		height: 200upx;
		background-color: #fff;
		text-align: center;
	}

	.header-two-title {
		width: 710upx;
		text-align: center;
		padding-top: 108upx;
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
	}

	.header-two-img {
		width: 146upx;
		height: 146upx;
		margin: 0 auto;
		margin-top: 70upx;
	}

	.title {
		margin: 32upx 0;
	}

	.phone {
		width: 710upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		border-bottom: 1px solid #f4f4f4;
		display: flex;
		align-items: center;
	}

	.phone-one {
		float: left;
		width: 120upx;
	}

	.phone-two {
		float: left;
	}

	.phone-three {
		float: left;
	}

	.verification {
		width: 710upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		border-bottom: 1px solid #f4f4f4;
	}

	.verification-one {
		display: flex;
		align-items: center;
		float: left;
	}

	.verification-two {
		width: 170upx;
		height: 54upx;
		float: right;
		font-size: 17upx;
		margin-top: 18upx;
		line-height: 54upx;
		color: #2586FF;
		border: 1px solid #2586FF;
		border-radius: 30upx;
		text-align: center;
	}

	.prompt {
		color: #999999;
		font-size: 24upx;
		margin-top: 22upx;
	}

	.login {
		width: 600upx;
		height: 100upx;
		margin: 0 auto;
		margin-top: 172upx;
		border-radius: 56upx;
		line-height: 100upx;
		text-align: center;
		color: #fff;
		background-image: linear-gradient(to right, #F98148, #F64A45);
		margin-bottom: 20upx;
	}

	.radios {
		margin-left: 90upx;
		color: #999999;
		font-size: 24upx;
	}

	.radios text {
		color: #F23812;
		margin: 0 10upx;
	}

	.order {
		height: 60px;
		line-height: 60px;
		text-align: center;
		margin-top: 70upx;
	}

	.order .line {
		display: inline-block;
		width: 200upx;
		border-top: 1px solid #ccc;
	}

	.order .txt {
		color: #CCCCCC;
		vertical-align: -4px;
	}

	.wxdl {
		width: 60upx;
		height: 60upx;
	}
	.buttons{
		width: 90%;
		margin: 0 auto;
		height: 100upx;
		background: linear-gradient(135deg, #F98148 0%, #F64A45 100%);
		border-radius: 56px;
		color: #FFF8F4;
		line-height: 100upx;
		margin-top: 200upx;
		font-size: 32upx;
	}
</style>
